<template>
	<div>
				<div class="detailtabel">
					<div class="table_main">
            <el-row>
              <el-col :sm="12"  :lg="8">
                <div class="label">编号</div>
                <div class="content">{{tableData.id}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">标题</div>
                <div class="content">{{tableData.title}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">话题</div>
                <div class="content">{{tableData.topic}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">点赞数</div>
                <div class="content">{{tableData.giving}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">置顶</div>
                <div class="content">
                  <el-tag
                    :type="tableData.top === 1 ? 'success' : 'info'"
                    disable-transitions>{{tableData.top == 1? '置顶': '未置顶'}}</el-tag>
                </div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">加热</div>
                <div class="content">
                  <el-tag
                    :type="tableData.hot === 1 ? 'success' : 'info'"
                    disable-transitions>{{tableData.hot == 1? '加热': '未加热'}}</el-tag>
                </div>
              </el-col>

              <el-col :sm="12" :lg="8">
                <div class="label">发帖人昵称</div>
                <div class="content">{{tableData.nickName}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">创建时间</div>
                <div class="content">{{tableData.createTime}}</div>
              </el-col>

              <el-col :sm="12" :lg="16">
                <div class="label">头像</div>
                <div class="content" style="height: 98px;">
                  <img style="width: 65px; height: 65px" :src="tableData.headImg">
                </div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">性别</div>
                <div class="content">{{tableData.sex ? tableData.sex == 1? '男': '女' : '未设置'}}</div>
              </el-col>
              <el-col :sm="12" :lg="8">
                <div class="label">年龄</div>
                <div class="content">{{tableData.age ? tableData.age : '未设置'}}</div>
              </el-col>

              <el-col :sm="24" :lg="24">
                <div class="label">内容</div>
                <div class="content">{{tableData.content}}</div>
              </el-col>
              <el-col :sm="24" :lg="24">
                <div class="label">图片</div>
                <div class="content">
                  <img
                    style="height: 200px"
                    v-for="url in srcList"
                    :key="url"
                    :src="url"
                    @click="preview(url)">
                </div>
              </el-col>

              <el-col :sm="12" :lg="8">
                <div class="label">状态</div>
                <div class="content">
                  <el-tag
                    :type="tableData.status === 1 ? 'success' : 'info'"
                    disable-transitions>{{tableData.status == 1? '正常': '删帖'}}</el-tag>
                </div>
              </el-col>
              <el-col :sm="12" :lg="16" v-if="tableData.result">
                <div class="label">删帖原因</div>
                <div class="content">{{tableData.result}}</div>
              </el-col>
            </el-row>
					</div>
          <div class="footer">
            <el-button v-if="tableData.status === 1" type="primary" size="big" icon="el-icon-close" @click="deletes()" >删除</el-button>
<!--            <el-button :disabled="!isAuth('playWithList:removeBanned')" v-else type="primary" size="big" icon="el-icon-check" @click="queueClick()" >解除封禁</el-button>-->
          </div>
				</div>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogFormVisible"  width="50%" style="text-align: center;">
      <img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
    </el-dialog>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
            lookimg: '',
            dialogFormVisible: false,
            reason: '',
				    tableData:{},
	      }
	    },
		computed: {
      srcList(){
        if(this.tableData.photo){
          return this.tableData.photo.split(',')
        }
        return []
      }
		},
	    methods: {
        preview(url){
          this.lookimg = url
          this.dialogFormVisible = true
        },
        // 删除
        deletes(row){
          this.$confirm(`确定删除此条记录?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl2('/bbs/delete'),
              method: 'get',
              params: this.$http.adornParams({
                'id':this.tableData.id,
                'type': 1
              })
            }).then(({data}) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            })
          }).catch(() => {})
        },
			// 获取数据列表
			dataSelect () {
				let id = this.$route.query.id
				this.$http({
					url: this.$http.adornUrl2(`/bbs/findOne?id=${id}`),
					method: 'get',
					params: this.$http.adornParams({
					})
				}).then(({data}) => {
					if (data.status === 0) {
					let returnData = data.data;
					this.tableData = returnData;
					}
				})
			},
	    },
		activated () {
			this.dataSelect()
		}
	}
</script>

<style scoped="scoped" lang="scss">
  .table_main{
    .el-col{
      display: flex;
      .label{
        width: 140px;
        background-color: #fafafa;
        padding: 16px 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
      .content{
        flex: 1;
        /*height: 60px;*/
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        padding-left: 24px;
        /*padding: 16px 24px;*/
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
    }

  }
  .footer{
    margin-top: 10px;
    margin-left: 150px;
    .el-button{
      margin-right: 20px;
    }
  }
  .detailtabel .table_main{
    border: 1px solid #e8e8e8;
  }

</style>
